<template>
  <tool-page title="计算两个日期间隔" @generate="generate" :remark="remark" :value-length="value.length">
    <template #value>
      <div v-if="value">
        {{ value }}（{{ getDateUnitName() }}）
      </div>
    </template>
    <template #operate>
      <div v-if="isInput">
        开始时间：<Input v-model="startTime" placeholder="开始时间" style="width: 180px; margin-right: 10px"/>
        结束时间：<Input v-model="endTime" placeholder="结束时间" style="width: 180px"/>
      </div>
      <div v-else>
        开始时间：
        <DatePicker v-model="startTime" type="date" split-panels placeholder="请选择日期"
                    style="width: 180px; margin-right: 10px"></DatePicker>
        结束时间：
        <DatePicker v-model="endTime" type="date" split-panels placeholder="请选择日期" style="width: 180px"></DatePicker>
      </div>
    </template>
    <template #buttonBefore>
      手动输入：
      <Switch v-model="isInput" style="margin-right: 10px" @on-change="isInputChange"/>
      单位：
      <i-select v-model="dateUnit" style="width:80px" @on-change="onDateUnitChange">
        <i-option v-for="(item, index) in dateUnits" :value="item.type" :key="index">{{ item.title }}</i-option>
      </i-select>
    </template>
  </tool-page>
</template>

<script>

export default {
  name: "CompareDateTime",
  data() {
    return {
      value: '--',
      remark: '输入（可以是各种类型的日期格式）或选择两个日期，计算两个日期的间隔时长',
      isInput: false,
      startTime: '',
      endTime: '',
      dateUnit: '',
      dateUnits: [{
        title: '毫秒',
        type: ''
      }, {
        title: '秒',
        type: 'seconds'
      }, {
        title: '分钟',
        type: 'minutes'
      }, {
        title: '小时',
        type: 'hours'
      }, {
        title: '星期',
        type: 'week'
      }, {
        title: '天',
        type: 'day'
      }, {
        title: '月',
        type: 'month'
      }, {
        title: '年',
        type: 'year'
      }]
    }
  },
  methods: {
    generate() {
      if (this.startTime && this.endTime) {
        this.value = this.baitu.DateUtil.compare(this.baitu.DateUtil.parse(this.startTime), this.baitu.DateUtil.parse(this.endTime), this.dateUnit).toString();
      }
    },
    isInputChange() {
      this.startTime = '';
      this.endTime = '';
      this.value = '--';
      localStorage.setItem('dateTimeIsInput', this.isInput ? '1' : '0');
    },
    getDateUnitName() {
      const dateUnit = this.dateUnits.find(item => item.type === this.dateUnit);
      if (dateUnit) {
        return dateUnit.title;
      }
      return '毫秒';
    },
    onDateUnitChange() {
      this.generate();
    }
  },
  created() {
    this.isInput = localStorage.getItem('dateTimeIsInput') === '1';
    this.generate();
  }
}
</script>

<style scoped>

</style>
